<template>
   <div class="banner" @click="handleGallaryClick">
       <div class="back"></div>
       <img class="b_img" src="../../../assets/images/04b92c99462687fa1ba45c1b5ba4ad77.jpg_600x330_bf9c4904.jpg" alt="">
      <div class="desc">
        <p>大连圣亚海洋世界(AAAA景区)</p>
        <div class="font_flag">
          <span class="iconfont icon-tupian banner_icon"></span>
          2
        </div>
      </div>
     <!--缩略图-->
     <FadeAnimation>
       <!--会以插槽的形式插到 FadeAnimation 中-->
       <Gallary v-if="showGallary" @close="handleGallaryColse"></Gallary>
     </FadeAnimation>
   </div>
</template>

<script>
import Gallary from '../../../common/gallary/Gallary.vue'
import FadeAnimation from '../../../common/FadeAnimation/FadeAnimation.vue'
export default {
  name: 'Banner',
  data () {
    return {
      showGallary: false
    }
  },
  methods: {
    handleGallaryClick () {
      this.showGallary = true
    },
    handleGallaryColse () {
      this.showGallary = false
    }
  },
  components: {
    Gallary,
    FadeAnimation
  }
}
</script>

<style lang="stylus" scoped>
  .banner
    position: relative
    .b_img
      width:100%
    .desc
      padding-left: .2rem
      padding-bottom: .2rem
      position: absolute
      right: 0
      left: 0
      bottom: 0
      color: #FFF
      display flex
      justify-content space-between
      p
        font-size .32rem
      background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8))
      .font_flag
        font-size .24rem
        height: .32rem
        line-height: .32rem
        padding:.0 .4rem
        background-color: #000
        border-radius .2rem
        .banner_icon
          font-size .24rem
</style>
<style>
</style>
